<template>
  <div>
    <h1>About child</h1>
    <p>title: {{ props.title }}</p>
    <p>username: {{ props.users.adminName }}</p>
    <p>title: {{ title }}</p>
    <p>username: {{ users.adminName }}</p>
    <button type="button" @click="editUsers">edit</button>
    <slot name="icon"></slot>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose, toRefs, onMounted, useAttrs, useSlots } from 'vue'
const props = defineProps({
  title: String,
  users: Object
})

// const { title, users } = props  // 解构Porps,要使用toRefs()转变成响应式对象。否则，props改变后，它不变化。
const { title, users } = toRefs(props)

const emit = defineEmits(['myclick'])

const editUsers = () => {
  emit('myclick', 123123)
}

defineExpose({
  a: 111,
  b: 222,
  c: true
})

onMounted(() => {
  // console.log(this) //undefined , <script setup>里面，this指向undefined
  const attrs = useAttrs() // -====> this.$attrs
  console.log(attrs) //{a: '1', b: '2', c: '3'}
  // console.log(attrs.a) //1

  const mySlots = useSlots()
  console.log(mySlots.icon)
})
</script>

<style></style>
